<template>
    <div class="home-list">
        <!-- 品牌制造商直供 -->
        <h1>品牌制造商直供</h1>
        <ul class="ppzz">
            <li v-for="item in List.brandList" :key="item.id">
                <img :src="item.pic_url" alt="">
                <p>{{ item.name }}</p>
                <p class="p">{{ '￥' + item.floor_price + '.00元' }}</p>
            </li>
        </ul>

        <!-- 新品首发 -->
        <h1>周一周四·新品首发</h1>
        <ul class="goods-List">
            <li v-for="item in List.newGoodsList" :key="item.id">
                <img :src="item.list_pic_url" alt="">
                <p>{{ item.name }}</p>
                <p class="p">{{ '￥' + item.retail_price + '.00元' }}</p>
            </li>
        </ul>

        <!-- 人气推荐 -->
        <h1>人气推荐</h1>
        <ul class="rqtj">
            <li v-for="item in List.hotGoodsList" :key="item.id">
                <img :src="item.list_pic_url" alt="">
                <div>
                    <p>{{ item.name }}</p>
                    <p>{{ item.goods_brief }}</p>
                    <p class="p">{{ '￥' + item.retail_price + '.00元' }}</p>
                </div>
            </li>
        </ul>

        <!-- 专题精选 -->
        <h1>专题精选</h1>
        <ul class="ztjx">
            <li v-for="item in List.topicList" :key="item.id">
                <img :src="item.scene_pic_url" alt="">
                <p>{{ item.title }}</p>
                <p class="p">{{ item.subtitle }}</p>
            </li>
        </ul>

        <!-- 商品分类 -->
        <template v-for="item in List.categoryList" :key="item.id">
            <h1>{{ item.name }}</h1>
            <ul class="goods-List">
                <li v-for="key in item.goodsList" :src="key.list_pic_url">
                    <img :src="key.list_pic_url" alt="">
                    <p>{{ key.name }}</p>
                    <p class="p">{{ '￥' + key.retail_price + '.00元' }}</p>
                </li>
            </ul>
        </template>
    </div>
</template>

<script 
setup name="HomeList">

// 发送请求，拿到分类列表数据渲染页面
import { getHomeList } from '../../../model/goods';
import { onMounted, ref } from 'vue'

// 准备一个变量，保存分类列表
const List = ref([])

// 挂载页面完毕，发送请求，请求分类列表
onMounted(async () => {
    const res = await getHomeList()
    if (res.status !== 200) return
    List.value = res.data.data
    console.log(res)
    console.log(res.data.data)
})

</script>

<style scoped>
img {
    display: block;
    width: 100%;
}

h1 {
    text-align: center;
    margin: 60px auto 30px;
}

.home-list {
    font-size: 28px;
    text-align: center;
    overflow: hidden;
}

.ppzz {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;


    >li {
        width: 48%;
        margin-bottom: 40px;
    }
}

.rqtj {
    >li {
        display: flex;
        background-color: #eee;
        text-align: left;
        margin-bottom: 10px;

        >div {
            padding-left: 20px;

            >p:nth-child(2),
            p:nth-child(3) {

            font-size: 18px;
            margin-top: 10px;
        }
    }

    >img {
        width: 100px;
    }
}
}

.ztjx {
    display: flex;
    overflow: auto;

    >li {
        flex: 0;
        margin: auto 10px;
        width: 400px;
        text-align: left;

        >p {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        >img {
            width: 400px;
            height: 300px;
        }
    }

}

.goods-List {
    display: flex;
    flex-wrap: wrap;

    >li {
        width: 50%;
    }
}

.p {
    color: brown;
}
</style>